<template>
	<view class="view-table">
		<view class="list-head">
			<view class="view-tr">
				<view class="view-th" v-if="hasChildren" style="width:30rpx"></view>
				<view class="view-th" v-for="(item,index) in columns" :key="index" :style="[colStyle(item)]">
					{{item.title}}
				</view>
			</view>
		</view>
		<view class="list-body">
			<template v-for="(item,index) in list" :key="index">
				<view class="view-tr">
					<view class="view-td" v-if="hasChildren" style="width:30rpx"
						@click="$set(item,'childrenShow',!item.childrenShow)">
						<view :class="{'jiantou':true,'show':!!item.childrenShow}"></view>
					</view>
					<view class="view-td" v-for="(colItem,colIndex) in columns" :key="colIndex"
						:style="[colStyle(colItem)]" v-html="colContent(item,colItem,index)"></view>
				</view>
				<template v-if="item.childrenShow">
					<view class="view-tr">
						<view class="view-td view-children">
							<table-list :columns="childrenColumns.columns" :list="item[childrenColumns.key]">
							</table-list>
						</view>
					</view>
				</template>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		name: "tableList",
		props: {
			childrenColumns: {
				type: Object,
				default () {
					return {
						show: false,
						key: 'children',
						columns: []
					}
				},
			},
			list: {
				type: Array,
				default () {
					return []
				}
			},
			columns: {
				type: Array,
				default () {
					return []
				}
			},
		},
		data() {
			return {}
		},
		computed: {
			hasChildren() {
				// console.log(this.childrenColumns);
				return this.childrenColumns && this.childrenColumns.show;
			}
		},
		methods: {
			colStyle(item) {
				const res = {};
				if (item.$width) {
					res.width = item.$width;
				} else {
					res.flex = 1;
				}
				return res
			},
			colContent(item, colItem, index) {
				if (colItem.type == 'index') {
					return index + 1;
				}
				if (colItem.format) {
					return colItem.format({
						item,
						index
					})
				} else {
					return item[colItem.key];
				}
			}
		}
	}
</script>

<style lang="scss">
	.view-table ::v-deep {
		width: 96%;
		margin: 0 2%;
		border-collapse: collapse;
		border-left: 1rpx solid #B5B9CD;
		border-top: 1rpx solid #B5B9CD;
		box-sizing: border-box;

		.view-tr {
			display: flex;

			.view-th,
			.view-td {
				border-right: 1rpx solid #B5B9CD;
				border-bottom: 1rpx solid #B5B9CD;
				font-size: 24rpx;
				padding: 18rpx 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.view-th {
				line-height: 36rpx;
				color: #333;
				background: #EBEDF2;
				white-space: nowrap;
			}

			.view-td {
				line-height: 34rpx;
				color: #343434;
			}

			.view-children {
				flex: 1;
				padding: 18rpx 0rpx;
			}
		}


		.jiantou {
			background: url('/static/img/left_icon.png') no-repeat center;
			background-size: contain;
			font-size: 22rpx;
			width: 1em;
			height: 1em;
			display: flex;
			align-items: center;
			justify-content: center;
			transform: rotate(180deg);
			transition: all 0.4s;

			&.show {
				transform: rotate(270deg);
			}
		}
	}
</style>